<template>
    <div class="home"> 
        <p class="title">
          <span class="system-mes"><svg-icon icon-class="mes"></svg-icon>系统通知：</span>
           <transition-group name="flip-list" tag="ul" :class="{meslist:animate=true}">
              <router-link tag="li" v-for="(item,index) in toDoList " :to="{ name: 'getMessage' }" :key="index">{{ item.title }}</router-link>
          </transition-group>
        </p>
        <order v-bind:rate="rate" v-bind:rateLevel="rate_level"></order>
        <tim v-bind:agentCount="agent_count" v-bind:payCount="pay_count" v-if="roles[0] !== 3"></tim>
        <shop v-bind:shop="merchant"></shop>
    </div>
</template>

<script>
import Order from './components/order.vue'
import Tim from './components/tim.vue'
import Shop from './components/shop.vue'
import { mapGetters } from 'vuex'
import { indexInit } from '@/api/index'
import { GetValidGread } from '@/api/myAngent'
import { accountInit } from '@/api/setting'

export default {
  components: {
    Order,
    Tim,
    Shop
  },
  data() {
    return {
      animate: false,
      toDoList: [],
      rate: {},
      rate_level: {},
      agent_count: {},
      pay_count: {},
      merchant: {}
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'roles'
    ])
  },
  created() {
    indexInit(this.id).then(response => {
      this.toDoList = response.data.result.notice
      this.rate = response.data.result.rate
      this.rate_level = response.data.result.rate_level
      this.agent_count = response.data.result.agent_count
      this.pay_count = response.data.result.pay_count
      this.merchant = response.data.result.merchant
      setInterval(this.scroll, 5000)
    })
    GetValidGread().then(res => {
      if (res.data.errorCode === 0) {
        this.$store.dispatch('addStatus', res.data.result)
      } else {
        this.$store.dispatch('addStatus', 0)
      }
    })
    if (this.roles[0] !== 0) {
      accountInit().then(res => {
        if (res.data.errorCode === 0) {
          if (res.data.result.bank_check_status === 0) {
            this.$confirm('账号信息不完善，请尽快完善账号信息！', '警告', {
              confirmButtonText: '前往完善',
              cancelButtonText: '暂不完善',
              type: 'warning'
            }).then(() => {
              this.$router.push({ name: 'account' })
            }).catch(() => {
              return false
            })
          }
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    }
  },
  methods: {
    scroll() {
      this.animate = true
      setTimeout(() => {
        this.toDoList.push(this.toDoList[0])
        this.toDoList.shift()
        this.animate = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
    @import './../index.scss';
</style>
